<template>
	<div class="absolute inset-0 flex items-center z-10">
		<div class="opacity-50 absolute inset-0" :class="bgClass"></div>
		<div class="absolute left-3">
			<div v-if="status === BetslipItemStatus.confirming" class="leading-[1em] animate-spin">
				<base-icon name="loading" class="animate-spin text-[18px] text-primary"></base-icon>
			</div>
			<div v-else class="w-[18px] h-[18px] rounded-full bg-white flex justify-center items-center">
				<base-icon
					v-if="status === BetslipItemStatus.success"
					name="tick"
					class="text-success"></base-icon>
				<base-icon
					v-if="status === BetslipItemStatus.fail"
					name="close"
					class="text-danger"></base-icon>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { BetslipItemStatus } from '@/types'
import { BaseIcon } from '@/components/base'

const props = defineProps({
	status: {
		type: String as PropType<BetslipItemStatus>,
		default: ''
	}
})

const bgClass = computed(() => {
	if (props.status === BetslipItemStatus.confirming) {
		return 'bg-disable'
	} else if (props.status === BetslipItemStatus.success) {
		return 'bg-success'
	} else if (props.status === BetslipItemStatus.fail) {
		return 'bg-danger'
	} else {
		return ''
	}
})
</script>
